<template>
  <div>

    <el-container>
      <el-aside width="30px">
        <div style="height: 100%;width:100%;">
          <div style="height: 80%;">&nbsp;</div>
          <div style="height: 20%;">

            <span @click="this.openServices">
              <svg t="1670114179946" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="4958" width="20" height="20">
              <path
                  d="M688 80v44.992a180.672 180.672 0 0 0-72.992 30.016l-33.024-31.008-44 47.008 32 29.984a180 180 0 0 0-28.992 71.008H496v64h44.992c4.672 26.528 15.168 50.752 30.016 72l-34.016 32.992 46.016 46.016 32.992-34.016a179.776 179.776 0 0 0 72 30.016V528h64v-44.992a180 180 0 0 0 71.008-28.992l29.984 32 47.008-44.032-31.008-32.96c15.072-21.44 25.28-46.24 30.016-73.024H944v-64h-44.992a179.776 179.776 0 0 0-30.016-72l30.016-30.016-45.024-44.992-29.984 30.016a179.776 179.776 0 0 0-72-30.016V80h-64z m32 106.016A117.248 117.248 0 0 1 838.016 304a117.248 117.248 0 0 1-118.016 118.016A117.248 117.248 0 0 1 601.984 304 117.248 117.248 0 0 1 720 185.984zM304.992 374.976l-59.008 24 23.04 57.984a221.12 221.12 0 0 0-75.04 74.016l-56.96-23.008-24 59.008 56.96 22.976a216.832 216.832 0 0 0-6.976 53.024c0 18.24 2.72 36.032 6.976 52.992l-56.96 23.008 24 58.976 56.96-22.976a219.872 219.872 0 0 0 75.008 74.976l-23.008 57.024 59.008 24 23.008-57.024a215.36 215.36 0 0 0 52.992 7.04c18.24 0 36.096-2.752 52.992-7.04l23.04 57.024 58.976-24-23.008-57.024a221.12 221.12 0 0 0 74.016-74.976l57.984 22.976 24-58.976-57.984-23.008c4.224-16.96 6.976-34.784 6.976-52.992 0-18.24-2.752-36.096-6.976-53.024l57.984-22.976-24-59.008-57.984 23.008a220 220 0 0 0-74.016-74.016l23.008-57.984-59.008-24-23.008 57.984a216.896 216.896 0 0 0-52.992-7.008c-18.24 0-36.032 2.784-52.992 7.04l-23.008-58.016z m76 115.008a152.096 152.096 0 0 1 152.992 152.96c0 85.248-67.776 154.016-152.96 154.016a153.792 153.792 0 0 1-154.016-153.984c0-85.216 68.8-153.024 153.984-153.024z"
                  p-id="4959"></path>
            </svg>
            </span>
            <!--            <svg t="1670114038682" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3649" width="20" height="20"><path d="M162.816 998.4a25.6256 25.6256 0 0 1-25.6-25.6V51.2a25.5744 25.5744 0 0 1 39.7056-21.3504l698.368 460.8a25.6256 25.6256 0 0 1 0 42.7008l-698.368 460.8c-4.2752 2.816-9.1904 4.2496-14.1056 4.2496z m25.6-899.6352v826.496L814.6944 512 188.416 98.7648z" p-id="3650"></path></svg>-->
            <!--            <svg t="1670114110193" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4000" width="20" height="20"><path d="M1022.06544 583.40119c0 11.0558-4.034896 20.61962-12.111852 28.696576-8.077979 8.077979-17.639752 12.117992-28.690436 12.117992L838.446445 624.215758c0 72.690556-14.235213 134.320195-42.718941 184.89915l132.615367 133.26312c8.076956 8.065699 12.117992 17.634636 12.117992 28.690436 0 11.050684-4.034896 20.614503-12.117992 28.691459-7.653307 8.065699-17.209964 12.106736-28.690436 12.106736-11.475356 0-21.040199-4.041036-28.690436-12.106736L744.717737 874.15318c-2.124384 2.118244-5.308913 4.88424-9.558703 8.283664-4.259 3.3984-13.180184 9.463536-26.78504 18.171871-13.598716 8.715499-27.415396 16.473183-41.439808 23.276123-14.029528 6.797823-31.462572 12.966313-52.289923 18.49319-20.827351 5.517667-41.446971 8.28571-61.842487 8.28571L552.801776 379.38668l-81.611739 0 0 571.277058c-21.668509 0-43.250036-2.874467-64.707744-8.615215-21.473057-5.734608-39.960107-12.749372-55.476499-21.039175-15.518438-8.289804-29.541827-16.572444-42.077328-24.867364-12.541641-8.290827-21.781072-15.193027-27.739784-20.714787l-9.558703-8.93244L154.95056 998.479767c-8.500605 8.921183-18.699897 13.386892-30.606065 13.386892-10.201339 0-19.335371-3.40454-27.409257-10.202363-8.079002-7.652284-12.437264-17.10968-13.080923-28.372188-0.633427-11.263531 2.659573-21.143553 9.893324-29.647227l128.787178-144.727219c-24.650423-48.464805-36.980239-106.699114-36.980239-174.710091L42.738895 624.207571c-11.057847 0-20.61655-4.041036-28.690436-12.111852-8.079002-8.082072-12.120039-17.640776-12.120039-28.696576 0-11.050684 4.041036-20.61962 12.120039-28.689413 8.073886-8.072863 17.632589-12.107759 28.690436-12.107759l142.81466 0L185.553555 355.156836l-110.302175-110.302175c-8.074909-8.077979-12.113899-17.640776-12.113899-28.691459 0-11.04966 4.044106-20.61962 12.113899-28.690436 8.071839-8.076956 17.638729-12.123109 28.691459-12.123109 11.056823 0 20.612457 4.052293 28.692482 12.123109l110.302175 110.302175 538.128077 0 110.303198-110.302175c8.070816-8.076956 17.632589-12.123109 28.690436-12.123109 11.050684 0 20.617573 4.052293 28.689413 12.123109 8.077979 8.070816 12.119015 17.640776 12.119015 28.690436 0 11.050684-4.041036 20.614503-12.119015 28.691459l-110.302175 110.302175 0 187.448206 142.815683 0c11.0558 0 20.618597 4.034896 28.690436 12.113899 8.076956 8.069793 12.117992 17.638729 12.117992 28.683273l0 0L1022.06544 583.40119 1022.06544 583.40119zM716.021162 216.158085 307.968605 216.158085c0-56.526411 19.871583-104.667851 59.616796-144.414087 39.733956-39.746236 87.88256-59.611679 144.411017-59.611679 56.529481 0 104.678084 19.865443 144.413064 59.611679C696.156742 111.48921 716.021162 159.631674 716.021162 216.158085L716.021162 216.158085 716.021162 216.158085 716.021162 216.158085z" p-id="4001"></path></svg>-->
          </div>
          <!--          <el-row :align="bottom">-->
          <!--            <el-col :span="24"><div class="grid-content bg-purple-dark">          <i class="el-icon-delete"></i>-->
          <!--            </div></el-col>-->

          <!--            <el-col :span="24"><div class="grid-content bg-purple-dark">          <i class="el-icon-delete"></i>-->
          <!--            </div></el-col>-->
          <!--          </el-row>-->


        </div>

      </el-aside>

      <el-container>
        <el-header v-show="outRunFlag==null||outRunFlag==false">
          <el-row justify="end" style="margin-top:10px;">
            <el-col :span="10">
              <div class="grid-content bg-purple-dark">&nbsp;
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-dark">
                <el-tag>运行模式:</el-tag>
                &nbsp;
                <el-select v-model="this.data.info.trans_type" class="m-2" placeholder="Select"
                           size="large">
                  <el-option
                      v-for="item in this.transformationTypeList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                  />
                </el-select>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-dark">
                <el-button @click="this.save">保存</el-button>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-dark">
                <el-button @click="this.saveAndClose">保存并关闭</el-button>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-dark">
                <el-button @click="this.close">关闭</el-button>
              </div>
            </el-col>
          </el-row>

        </el-header>
        <el-main style="padding: 0">
          <div>
            <SquareLakeComponentList v-show="outRunFlag==null||outRunFlag==false" :graph="this.graph"
                                     :renderFlow="this.renderFlow"></SquareLakeComponentList>
            <div class="container" ref="container">
            </div>
            <SquareLakeFlowBizProperties ref="bizProperties"
                                         :propertiesBackFill="this.propertiesBackFill"
                                         :getProcessVersionId="this.getProcessVersionId"
                                         :getResource="this.getResource"
                                         :parseDefineToJson="this.parseDefineToJson"
                                         :getNodeProperties="this.getNodeProperties"></SquareLakeFlowBizProperties>
            <SquareLakeFlowServices v-show="outRunFlag==null||outRunFlag==false" ref="services" :id="this.id"
                                    :findInputStepInfo="this.findInputStepInfo"
                                    :version="this.version"
                                    :mockRun="this.mockRun"
                                    :stepStatus="this.stepStatus"
                                    :stepInput="this.stepInput"
                                    :stepOutput="this.stepOutput"
                                    :stepLogCollect="this.stepLogCollect"
                                    :mockSuccess="this.mockSuccess"
                                    :mockError="this.mockError"
                                    :removePause="this.removePause"
                                    :resetParam="this.resetParam"
            ></SquareLakeFlowServices>


            <Modal v-model="this.compObjectDiag" width="100%" top="1vh" :mask-closable="false"
                   :footer-hide="true" :before-close="this.disconnect"
                   :mask="false" ok-text="" cancel-text="" :z-index="0">
              <ProcessCompObjectManager :compCode="this.currentCompCode"
                                        :compVersion="this.currentCompVersion" ref="objManager"/>
<!--              <div>&nbsp;</div>-->
<!--              <el-button @click="compObjectDiag = false">取 消</el-button>-->
            </Modal>


          </div>
          <SquareLakeFlowNodeHover ref="nodeHover"></SquareLakeFlowNodeHover>
        </el-main>
        <!--        <el-footer>Footer</el-footer>-->
      </el-container>
    </el-container>
  </div>
</template>

<script>
import LogicFlow from '@logicflow/core'
import "@logicflow/core/dist/style/index.css";
import {Control, Group, InsertNodeInPolyline, Menu, MiniMap, SelectionSelect} from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css'
import SquareLakeComponentList from './SquareLakeComponentList.vue'
import squareLakePolylineEdge from "../../components/flow/edge/SquareLakePolylineEdge.js";
import SquareLakeFlowBizProperties from './SquareLakeFlowBizProperties.vue'
import {adapterOut} from '../../components/flow/adapter/SquareLakeFlowOutAdapter.js'
import {adapterIn} from '../../components/flow/adapter/SquareLakeFlowInAdapter.js'
import {post} from '../../config/Request.js'
import {nanoid} from "nanoid";
import SquareLakeFlowServices from "@/views/process/SquareLakeFlowServices.vue";
import SquareLakeFlowNodeHover from "./SquareLakeFlowNodeHover.vue";
import SquareLakeMiss from "@/components/flow/node/SquareLakeMiss.js";
import {h} from 'vue'
import ProcessCompObjectManager from "@/views/comp/ProcessCompObjectManager.vue";
import apis from "@/request/apis.js";

export default {
  name: 'SquareLakeFlow',
  props: ["id", "outRunFlag", "params"],
  components: {
    ProcessCompObjectManager,
    SquareLakeComponentList,
    SquareLakeFlowBizProperties,
    SquareLakeFlowServices,
    SquareLakeFlowNodeHover
  },
  watch: {},
  // props: {
  //   msg: String
  // },
  data() {
    return {
      graph: null,
      fisheye: null,
      id: null,
      name: null,
      saved: false,
      compObjectDiag: false,
      currentCompCode: null,
      currentCompVersion: null,
      logCollect: new Map(),
      transformationTypeList: [
        {
          code: "Normal",
          name: "多线程"
        },
        {
          code: "SingleThreaded",
          name: "单线程"
        }
      ],
      version: null,
      data: {
        info: {
          trans_type: "Normal"
        },
        step: [],
        order: {
          hop: []
        }
      }
    }
  },
  async mounted() {
    if (!this.$props.id) {
      await this.queryData(this.$route.query.id);
    } else {
      await this.queryData(this.$props.id);
    }
    this.initFlow();

    if (!this.$props.outRunFlag) {
      window.addEventListener('keydown', this.handleEvent)
    } else {
      this.openServices();
      setTimeout(() => {
        this.$refs.services.run(this.$props.params);
      }, 500)
    }
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleEvent) // 在页面销毁的时候记得解除
  },
  methods: {
    openServices() {
      this.$refs.services.show();
    },
    close() {
      this.$router.push({
        name: "home"
      });
    },
    mockRun() {
      this.mockStop();
      this.logCollect = new Map();
      const d = this.getNodeProperties();
      for (const node of d.step) {
        let nodeModelById = this.graph.getNodeModelById(node.name);
        let props = nodeModelById.getProperties();
        props.logList = null;
        props.inputList = [];
        props.outputList = [];
        nodeModelById.setProperties(props)
      }
    },
    mockPause(id) {
      this.mockStop(id);
      var elementNodeListOf = null;
      if (!id) {
        elementNodeListOf = document.getElementsByClassName("nodeBox");
      } else {
        elementNodeListOf = document.getElementsByClassName(id);
      }
      for (const el of elementNodeListOf) {
        el.classList.add('pause');
      }
    },
    mockInit(id) {
      this.mockStop(id);
      var elementNodeListOf = null;
      if (!id) {
        elementNodeListOf = document.getElementsByClassName("nodeBox");
      } else {
        elementNodeListOf = document.getElementsByClassName(id);
      }
      for (const el of elementNodeListOf) {
        el.classList.add('circle');
      }
    },
    mockStop(id) {
      var elementNodeListOf = null;
      if (!id) {
        elementNodeListOf = document.getElementsByClassName("nodeBox");
      } else {
        elementNodeListOf = document.getElementsByClassName(id);
      }
      for (const el of elementNodeListOf) {
        el.classList.remove('circle');
        el.classList.remove('success');
        el.classList.remove('error');
        el.classList.remove('emptyExecute');
        // el.classList.remove('pause');
      }
    },
    removePause(id) {
      var elementNodeListOf = null;
      if (!id) {
        elementNodeListOf = document.getElementsByClassName("nodeBox");
      } else {
        elementNodeListOf = document.getElementsByClassName(id);
      }
      for (const el of elementNodeListOf) {
        el.classList.remove('pause');
      }
    },
    mockSuccess(id) {
      this.mockStop(id);
      var elementNodeListOf = null;
      if (!id) {
        elementNodeListOf = document.getElementsByClassName("nodeBox");
      } else {
        elementNodeListOf = document.getElementsByClassName(id);
      }
      for (const el of elementNodeListOf) {
        el.classList.add('success');
      }
    },
    mockEmptyExecute(id) {
      this.mockStop(id);
      var elementNodeListOf = null;
      if (!id) {
        elementNodeListOf = document.getElementsByClassName("nodeBox");
      } else {
        elementNodeListOf = document.getElementsByClassName(id);
      }
      for (const el of elementNodeListOf) {
        el.classList.add('emptyExecute');
      }
    },
    stepLogCollect(stepId, str) {
      let logInfo = this.logCollect.get(stepId);
      if (!logInfo) {
        logInfo = new Map();
        this.logCollect.set(stepId, logInfo);
      }

      let logList = logInfo.get("log");
      if (!logList) {
        logList = [];
        logInfo.set("log", logList);
      }
      logList.push(str);

      var nodeModelById = this.graph.getNodeModelById(stepId);
      let props = nodeModelById.getProperties();
      props.logList = logList;
      nodeModelById.setProperties(props)
    },
    resetParam() {
      return this.findInputStepInfo();
    },
    stepInput(stepId, input) {
      let logInfo = this.logCollect.get(stepId);
      if (!logInfo) {
        logInfo = new Map();
        this.logCollect.set(stepId, logInfo);
      }

      let logList = logInfo.get("input");
      if (!logList) {
        logList = [];
        logInfo.set("input", logList);
      }
      logList.push(input);
      var nodeModelById = this.graph.getNodeModelById(stepId);
      let props = nodeModelById.getProperties();
      props.inputList = logList;
      nodeModelById.setProperties(props);
    },
    stepOutput(stepId, output) {
      let logInfo = this.logCollect.get(stepId);
      if (!logInfo) {
        logInfo = new Map();
        this.logCollect.set(stepId, logInfo);
      }

      let logList = logInfo.get("output");
      if (!logList) {
        logList = [];
        logInfo.set("output", logList);
      }
      logList.push(output);
      var nodeModelById = this.graph.getNodeModelById(stepId);
      let props = nodeModelById.getProperties();
      props.outputList = logList;
      nodeModelById.setProperties(props);
    },
    stepStatus(data) {
      for (let stepStatus of data.stepStatus) {

        if (stepStatus.stepExecutionStatus == 'STATUS_IDLE') {
          this.mockInit(stepStatus.stepName);
          continue;
        }

        if (stepStatus.stepExecutionStatus == 'STATUS_RUNNING') {
          this.mockInit(stepStatus.stepName);
          continue;
        }


        if (stepStatus.stepExecutionStatus == 'STATUS_FINISHED') {
          if (stepStatus.errors > 0) {
            this.mockError(stepStatus.stepName);
          } else {
            if (stepStatus.linesRead > 0) {
              this.mockSuccess(stepStatus.stepName);
            } else {
              this.mockEmptyExecute(stepStatus.stepName);
            }

          }
          continue;
        }

      }

    },
    mockError(id) {
      this.mockStop(id);
      var elementNodeListOf = null;
      if (!id) {
        elementNodeListOf = document.getElementsByClassName("nodeBox");
      } else {
        elementNodeListOf = document.getElementsByClassName(id);
      }
      for (const el of elementNodeListOf) {
        el.classList.add('error');
      }
    },
    async save() {
      this.saved = true;
      try {
        await this.saveProcess();
      } catch (e) {
        console.error(e)
      }
      this.saved = false;
    },
    async saveAndClose() {
      await this.save();
      this.close();
    },
    async handleEvent(event) {
      switch (event.keyCode) {
        case 83:
          event.preventDefault()
          event.returnValue = false // 阻止直接保存网页
          // eslint-disable-next-line no-prototype-builtins
          if (event.ctrlKey && event.code === 'KeyS' && !this.saved) {
            this.saved = true;
            // 在这里写保存需要执行的逻辑
            try {
              await this.saveProcess();
            } catch (e) {
              console.error(e)

            }
            this.saved = false;
          }
          if (event.ctrlKey && event.code === 'KeyS') return false
          break
      }
    },
    async saveProcess() {
      if (!this.id) {
        return
      }
      const d = this.getResource();
      await apis.post("/square-lake/process/version/content/save_xml", {
        "id": this.id,
        processVersion: this.version,
        resource: d
      });

      this.$notify({
        title: '提示',
        message: h('i', {style: 'color: teal'}, '保存成功')
      });

    },

    async queryData(id) {
      const data = await apis.post("/square-lake/process/version/content/get_by_id", {id: id});
      if (!data) {
        return;
      }
      if (data.resource) {
        this.data = data.resource;
      }
      this.id = data.id;
      this.version = data.processVersion;
      this.name = data.processName;
    },
    propertiesBackFill(id, data) {
      var nodeModelById = this.graph.getNodeModelById(id);
      if (nodeModelById) {
        nodeModelById.setProperties(data)
      }

    },
    findInputStepInfo() {
      const c = this.getNodeProperties();
      if (!c) {
        return
      }
      const stepInfo = c.step;

      const inputJson = [];
      for (const st of stepInfo) {
        if (st.cgCode != '输入') {
          continue;
        }
        if (st.input != null) {
          inputJson.push(st.input);
        }
      }
      if (!inputJson || inputJson.length <= 0) {
        return
      }
      let obj = [];
      for (const input of inputJson) {
        const tempObj = this.parseFieldDefineToJson(input.params);
        obj.push(tempObj);
      }
      return obj;
    },
    parseDefineToJson(m) {
      const defaultValue = {
        "": ""
      }
      if (!m) {
        return defaultValue;
      }


      let c = this.parseFieldDefineToJson(m.params);
      if (m.isArrayFlag) {
        c = [c];
      }
      return c;
    },
    parseFieldDefineToJson(input) {
      let tempObj = {};
      try {
        for (const inp of input) {
        }
      } catch (e) {
        input = [input]
      }
      for (const inp of input) {

        if (inp && inp.children && inp.children.length > 0) {
          tempObj[inp.fieldCode] = this.parseFieldDefineToJson(inp.children);
        } else {
          tempObj[inp?.fieldCode] = '';
        }

      }
      return tempObj;
    },
    getNodeProperties(id) {
      if (!id) {
        const d = this.graph.getGraphData();
        return d;
      }
      var nodeModelById = this.graph.getNodeModelById(id);
      if (nodeModelById) {
        return nodeModelById.getProperties()
      }
      return null;
    },
    getProcessVersionId() {
      return this.id;
    },
    getResource() {
      const d = this.graph.getGraphData();
      d.info = {};
      d.info.trans_type = this.data?.info?.trans_type;
      return d;
    },
    renderFlow() {
      this.graph.render(this.data);
    },
    disconnect(){
      this.$refs.objManager.disconnect();
    },
    initFlow() {
      this.graph = new LogicFlow({
        container: this.$refs.container,
        // stopMoveGraph: true,
        grid: {
          // size: 120,
          visible: true,
          type: 'mesh',
          config: {
            color: '#dadada',
            thickness: 1,
          },
        },
        keyboard: {
          enabled: true
        },
        idGenerator(type) {
          const id = nanoid(5);
          return type + id;
        },
        plugins: [Menu, MiniMap, Group, InsertNodeInPolyline, Control, SelectionSelect],
        // background: {
        //   backgroundImage: "url(../asserts/img/grid.svg)",
        //   backgroundRepeat: "repeat"
        // },
        edgeType: 'SquareLakePolylineEdge',
        animation: true,
        // width: window.innerWidth,
        height: window.innerHeight - 80
      });

      this.graph.setTheme({
        arrow: {
          offset: 4, // 箭头垂线长度
          verticalLength: 2, // 箭头底线长度
        }
      });

      const $this = this;
      // 为菜单追加选项（必须在 lf.render() 之前设置）
      this.graph.extension.menu.addMenuConfig({
        nodeMenu: [
          {
            text: '暂停',
            async callback(node) {
              //  node.id;
              //判断debug窗口是否打开，打开了才能设置断点
              if (!$this.$refs.services.drawer) {
                $this.$notify({
                  title: '提示',
                  message: h('i', {style: 'color: teal'}, '请先打开调试窗口')
                });
                return;
              }
              await $this.$refs.services.stepPause(node.id);
              $this.$notify({
                title: '提示',
                message: h('i', {style: 'color: teal'}, '暂停成功')
              });
              $this.mockPause(node.id);
              //修改节点的样式

              //后面可能需要表达式

              //可能需要单步跳过

            }
          },
          {
            text: '查看包',
            async callback(node) {
              $this.compObjectDiag = true;
              $this.currentCompCode = node.type;
              $this.currentCompVersion = node.version || '1.0.0';
              setTimeout(function () {
                this.$refs.objManager.loadZip($this.currentCompCode, $this.currentCompVersion,false,true);
              }.bind($this), 0)
            }
          },
          // {
          //   text: '属性',
          //   callback(node) {
          //     alert(`
          // 节点id：${node.id}
          // 节点类型：${node.type}
          // 节点坐标：(x: ${node.x}, y: ${node.y})`
          //     );
          //   },
          // },
        ],
        edgeMenu: [
          {
            text: '属性',
            callback(edge) {
              alert(`
          边id：${edge.id}
          边类型：${edge.type}
          边坐标：(x: ${edge.x}, y: ${edge.y})
          源节点id：${edge.sourceNodeId}
          目标节点id：${edge.targetNodeId}`
              );
            },
          },
        ],
        graphMenu: [
          {
            text: '分享',
            callback() {
              alert('分享成功！');
            }
          },
        ],
      });

      this.graph.extension.control.addItem({
        iconClass: "custom-minimap",
        title: "",
        text: "导航",
        onMouseEnter: (lf, ev) => {
          const position = lf.getPointByClient(ev.x, ev.y);
          lf.extension.miniMap.show(
              position.domOverlayPosition.x - 120,
              position.domOverlayPosition.y + 35
          );
        },
        // onClick: (lf, ev) => {
        //   const position = lf.getPointByClient(ev.x, ev.y);
        //   lf.extension.miniMap.show(
        //       position.domOverlayPosition.x - 120,
        //       position.domOverlayPosition.y + 35
        //   );
        // }
      });

      // this.graph.register(squareLakeInput);
      // this.graph.register(SquareLakeFieldNameConvert);


      this.graph.register(squareLakePolylineEdge);

      const d = this.data?.step;
      var missTypeModel = [];
      if (d && d.length > 0) {
        d.forEach(value => {
          var s = value.gui.type || value.type;
          if (s) {
            var sb = {
              type: s, model: SquareLakeMiss.model, view: SquareLakeMiss.view
            }

            var find = false;
            for (let i = 0; i < missTypeModel.length; i++) {
              if (missTypeModel[i].type == s) {
                find = true;
                break
              }
            }
            if (!find) {
              missTypeModel.push(sb);
            }
          }
        })
      }
      missTypeModel.forEach(value => {
        this.graph.register(value);
      })
      this.graph.adapterOut = adapterOut;
      this.graph.adapterIn = adapterIn;
      // this.graph.render(this.data);

      // console.log(this.data)
      window.graph = this.graph;

      //打开边动画
      // const {edges} = this.graph.getGraphRawData();
      // if (edges) {
      //   edges.forEach(({id}) => {
      //     this.graph.openEdgeAnimation(id)
      //   });
      //
      // }

      const {eventCenter} = this.graph.graphModel;


      eventCenter.on('node:click', (args) => {
        if (!this.$props.outRunFlag) {
          this.$refs.bizProperties.show(args.data.type, args.data.id, args.data.text.value, args.data.properties);
        }
      });
      let dragFlag = false;
      eventCenter.on('node:dnd-drag', (data) => {
        dragFlag = true;
        this.$refs.nodeHover.hide();
      });
      eventCenter.on('node:dnd-add', (data) => {
        dragFlag = false;
        this.$refs.nodeHover.hide();
      });
      eventCenter.on('node:drag', (data) => {
        dragFlag = true;
        this.$refs.nodeHover.hide();
      });
      eventCenter.on('node:drop', (data) => {
        dragFlag = false;
        this.$refs.nodeHover.hide();
      });
      eventCenter.on('node:dragstart', (data) => {
        dragFlag = true;
        this.$refs.nodeHover.hide();
      });


      eventCenter.on('node:mouseenter', (data) => {
        const {edges} = this.graph.getGraphRawData();
        if (!dragFlag) {
          setTimeout(() => {
            var boundingClientRect = data.e.target.getBoundingClientRect();
            //移进
            this.$refs.nodeHover.show({
              properties: data.data.properties
            }, boundingClientRect.left + boundingClientRect.width, boundingClientRect.top);
          }, 0);
        }

        // console.log(edges)
        if (edges) {
          this.openFromEdgeAnima(edges, data.data.id);
        }
      });


      eventCenter.on('node:mouseleave', (args) => {
        const {edges} = this.graph.getGraphRawData();
        this.$refs.nodeHover.hideInterval();
        if (edges) {
          edges.forEach(({id}) => {
            this.graph.closeEdgeAnimation(id)
          });
        }
      })


      eventCenter.on('edge:mouseenter', (args) => {
        const {edges} = this.graph.getGraphRawData();
        console.log(args)
        // console.log(edges)
        if (edges) {
          this.openToEdgeAnima(edges, args.data.targetNodeId);
        }
      });

      eventCenter.on('edge:mouseleave', (args) => {
        this.graph.setProperties(args.data.id, {
          isSelected: false
        })
        const {edges} = this.graph.getGraphRawData();
        if (edges) {
          edges.forEach(({id}) => {
            this.graph.closeEdgeAnimation(id)
          });
        }
      })


      //注册全局移动事件
      this.graph.graphModel.addNodeMoveRules((model, deltaX, deltaY) => {
        // 如果移动的是分组，那么分组的子节点也跟着移动。
        if (model.isGroup && model.children) {
          this.graph.graphModel.moveNodes(model.children, deltaX, deltaY, true);
        }
        return true;
      });
    },
    openToEdgeAnima(edges, toId) {
      let targetEdges = [];
      edges.forEach(e => {
        if (e.targetNodeId == toId) {
          this.graph.openEdgeAnimation(e.id);
          targetEdges.push(e.sourceNodeId);
        }
      });
      if (targetEdges.length > 0) {
        for (const b of targetEdges) {
          this.openToEdgeAnima(edges, b);
        }
      }
    },
    openFromEdgeAnima(edges, fromId) {
      let targetEdges = [];
      edges.forEach(e => {
        if (e.sourceNodeId == fromId) {
          this.graph.openEdgeAnimation(e.id);
          targetEdges.push(e.targetNodeId);
        }
      });
      if (targetEdges.length > 0) {
        for (const b of targetEdges) {
          this.openFromEdgeAnima(edges, b);
        }
      }
    }
  },
  created() {
  }
}
</script>
<style scoped>
.container {
  width: 100%;
  /*height: 800px;*/
}
</style>
